<template>
  <div class="password-new">
    <div>
      <el-row style="border-bottom: 1px solid #cccccc; margin-bottom: 20px;">
        <h1>购买服务</h1>
      </el-row>
      <el-row style="margin-bottom: 40px">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" status-icon>
          <el-card class="card">
            <h3>请选择所需服务</h3>
            <el-form-item prop="type">
              <el-radio-group v-model="dataForm.type">
                <el-radio label="收银系统购买">收银系统购买</el-radio>
                <br />
                <el-radio label="收银平台合作商了解洽谈">收银平台合作商了解洽谈</el-radio>
                <br />
                <el-radio label="企业微信公众号代运营">企业微信公众号代运营</el-radio>
                <br />
                <el-radio label="软件/应用开发咨询">软件/应用开发咨询</el-radio>
                <br />
              </el-radio-group>
            </el-form-item>
            <h3>联系信息</h3>
            <el-form-item label="姓名" prop="contactName">
              <el-input v-model="dataForm.contactName" maxlength="15"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="contactMobile">
              <el-input v-model="dataForm.contactMobile" maxlength="15"></el-input>
            </el-form-item>
            <el-form-item label="地址信息" prop="address">
              <el-input v-model="dataForm.address" maxlength="100"></el-input>
            </el-form-item>
            <el-button
              class="btn-submit"
              type="primary"
              @click="dataFormSubmit()"
              :disabled="disabled"
            >提交</el-button>
          </el-card>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[2|3|4|5|7|8|9][0-9]\d{8}$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      disabled: false,
      dataForm: {
        type: null,
        contactName: null,
        contactMobile: null,
        address: null
      },
      dataRule: {
        type: [{ required: true, message: "请选择所需服务", trigger: "blur" }],
        contactName: [
          { required: true, message: "请填写姓名", trigger: "blur" }
        ],
        contactMobile: [
          { required: true, message: "请填写联系电话", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请填写地址信息", trigger: "blur" }
        ]
      }
    };
  },
  created() {},
  methods: {
    // 提交表单
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.disabled = true;
          this.$http({
            url: this.$http.adornUrl("/api/member/service/apply"),
            method: "post",
            data: this.$http.adornData(this.dataForm)
          }).then(({ data }) => {
            if (data && (data.code === 0 || data.code === 200)) {
              this.$message.success("购买成功");
              // this.$router.replace({ name: 'login' });
            } else {
              this.disabled = false;
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.password-new {
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;

  > div {
    margin: 0 auto;
    width: 470px;
    // margin-top: 50px;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: center;
  }

  .go-back-btn {
    margin-bottom: 20px;
    float: right;
  }

  .btn-submit {
    width: 100%;
  }
  /* 谷歌 */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
  }

  .card {
    text-align: left;
  }
  .el-radio {
    margin-bottom: 10px !important;
  }
}
</style>

<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
</style>
